<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css" />
    <!-- 需要用到Jquery吗？？？ -->
  </head>

  <body>
    <div id="app">
      <!-- {{1+1}} -->

      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
          <label>
            Id:
            <input type="text" class="form-control" v-model="id" />
          </label>

          <label>
            Name:
            <input
              type="text"
              class="form-control"
              v-model="name"
              @keyup.f2="add"
            />
          </label>

          <input
            type="button"
            value="添加"
            class="btn btn-primary"
            @click="add()"
          />

          <label>
            搜索名称关键字：
            <input
              type="text"
              class="form-control"
              v-model="keywords"
              id="search"
              v-focus
              v-color="'green'"
            />
          </label>
        </div>
      </div>

      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{ item.id }}</td>
            <td v-text="item.name"></td>
            <td>{{ item.ctime | dateFormat() }}</td>
            <td>
              <a href="" @click.prevent="del(item.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div id="app2">
      <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">
        {{ dt | dateFormat }}
      </h3>
    </div>

    <script>
      // 全局的过滤器， 进行时间的格式化
      // 所谓的全局过滤器，就是所有的VM实例都共享的
      Vue.filter("dateFormat", function(dateStr, pattern = "") {
        // 根据给定的时间字符串，得到特定的时间
        var dt = new Date(dateStr);

        //   yyyy-mm-dd
        var y = dt.getFullYear();
        var m = dt.getMonth() + 1;
        var d = dt.getDate();

        // return y + '-' + m + '-' + d

        if (pattern.toLowerCase() === "yyyy-mm-dd") {
          return `${y}-${m}-${d}`;
        } else {
          var hh = dt.getHours();
          var mm = dt.getMinutes();
          var ss = dt.getSeconds();

          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
        }
      });

      // 自定义全局按键修饰符
      Vue.config.keyCodes.f2 = 113;

      Vue.directive("focus", {
        bind: function(el) {},
        inserted: function(el) {
          el.focus();
          // 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
        },
        updated: function(el) {}
      });

      // 自定义一个 设置字体颜色的 指令
      Vue.directive("color", {
        bind: function(el, binding) {
          // el.style.color = 'red'
          // console.log(binding.name)
          // 和样式相关的操作，一般都可以在 bind 执行

          // console.log(binding.value)
          // console.log(binding.expression)

          el.style.color = binding.value;
        }
      });

      var vm = new Vue({
        el: "#app",
        data: {
          id: "",
          name: "",
          keywords: "", // 搜索的关键字
          list: [
            { id: 1, name: "奔驰", ctime: new Date() },
            { id: 2, name: "宝马", ctime: new Date() }
          ]
        },
        methods: {
          add() {
            var car = { id: this.id, name: this.name, ctime: new Date() };
            this.list.push(car);
            this.id = this.name = "";
          },
          del(id) {
            var index = this.list.findIndex(item => {
              if (item.id == id) {
                return true;
              }
            });
            this.list.splice(index, 1);
          },
          search(keywords) {
            return this.list.filter(item => {
              if (item.name.includes(keywords)) {
                return item;
              }
            });
          }
        }
      });

      var vm2 = new Vue({
        el: "#app2",
        data: {
          dt: new Date()
        },
        methods: {},
        filters: {
          dateFormat: function(dateStr, pattern = "") {
            // 根据给定的时间字符串，得到特定的时间
            var dt = new Date(dateStr);

            //   yyyy-mm-dd
            var y = dt.getFullYear();
            var m = (dt.getMonth() + 1).toString().padStart(2, "0");
            var d = dt
              .getDate()
              .toString()
              .padStart(2, "0");

            if (pattern.toLowerCase() === "yyyy-mm-dd") {
              return `${y}-${m}-${d}`;
            } else {
              var hh = dt
                .getHours()
                .toString()
                .padStart(2, "0");
              var mm = dt
                .getMinutes()
                .toString()
                .padStart(2, "0");
              var ss = dt
                .getSeconds()
                .toString()
                .padStart(2, "0");

              return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`;
            }
          }
        },
        directives: {
          // 自定义私有指令
          fontweight: {
            // 设置字体粗细的
            bind: function(el, binding) {
              el.style.fontWeight = binding.value;
            }
          },
          fontsize: function(el, binding) {
            // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
            el.style.fontSize = parseInt(binding.value) + "px";
          }
        }
      });
    </script>
  </body>
</html>
